{% extends "base.html" %}
{% load static %}

{% block title %}风之宿 - 体验传统日式风情的舒适住宿{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- 主视觉轮播 -->
<div class="pt-16 md:pt-0">
  <div class="swiper-container h-[50vh] md:h-[80vh] overflow-hidden">
    <div class="swiper-wrapper">
      <div class="swiper-slide h-full">
        <div class="slider h-full">
          <img src="{% static 'images/slider1.jpg' %}" alt="风之宿外观" class="w-full h-full object-cover">
        </div>
      </div>
      <div class="swiper-slide h-full">
        <div class="slider h-full">
          <img src="{% static 'images/slider2.jpg' %}" alt="风之宿庭院" class="w-full h-full object-cover">
        </div>
      </div>
      <div class="swiper-slide h-full">
        <div class="slider h-full">
          <img src="{% static 'images/slider3.jpg' %}" alt="风之宿客房" class="w-full h-full object-cover">
        </div>
      </div>
    </div>
    <div class="swiper-pagination bottom-4"></div>
    <div class="swiper-button-prev text-white/80 hover:text-white"></div>
    <div class="swiper-button-next text-white/80 hover:text-white"></div>
  </div>
</div>

<!-- 关于我们 -->
<section id="about" class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center">
      <div class="md:w-1/3 mb-8 md:mb-0">
        <div class="w-full flex justify-center md:justify-end">
          <div class="text-4xl md:text-5xl font-serif font-bold text-primary">
            风之宿 概要
          </div>
        </div>
      </div>
      <div class="md:w-2/3 md:pl-12">
        <h2 class="text-2xl md:text-3xl font-serif font-semibold mb-6 text-primary">
          欢迎来到风之宿
        </h2>
        <p class="text-lg leading-relaxed">
          {# 处理page_contents可能未定义的情况 #}
          {% if page_contents and page_contents.welcome_text %}{{ page_contents.welcome_text }}{% else %}风之宿是一家位于山间的传统日式旅馆，我们致力于为客人提供宁静舒适的住宿体验。在这里，您可以远离城市的喧嚣，感受大自然的怀抱，体验地道的日式 hospitality。我们的理念是让每一位客人都能感受到家的温暖，同时体验日本传统文化的魅力。{% endif %}
        </p>
      </div>
    </div>
  </div>
</section>

<!-- 特色房间 -->
<section id="featured-rooms" class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-center mb-12 text-primary">特色房间</h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {% for room in featured_rooms %}
      <div class="bg-white rounded-lg overflow-hidden shadow-custom hover:shadow-lg transition-shadow">
        <div class="h-56 overflow-hidden">
          {# 优先使用数据库图片，无则使用默认图 #}
          {% if room and room.image_url %}
            <img src="{% static '' %}uploads/{{ room.image_url }}" alt="{{ room.name }}" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
          {% else %}
            <img src="{% static 'images/food1.jpg' %}" alt="特色房间图片" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
          {% endif %}
        </div>
        <div class="p-6">
          <h4 class="text-xl font-semibold mb-3 text-primary">{% if room %}{{ room.name }}{% else %}特色客房{% endif %}</h4>
          <p class="text-gray-600 mb-2">
            {% if room and room.description %}
              {% if room.description|length > 100 %}{{ room.description|slice:":100" }}...{% else %}{{ room.description }}{% endif %}
            {% else %}
              这是我们精心设计的特色客房，为您提供舒适的住宿体验。
            {% endif %}
          </p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-accent">¥{% if room %}{{ room.price }}{% else %}1200{% endif %}/晚</span>
          </div>
        </div>
      </div>
      {% empty %}
      {# 当没有房间数据时显示 #}
      <div class="col-span-full py-16 text-center">
        <div class="text-gray-400 mb-4">
          <i class="fa fa-bed text-5xl"></i>
        </div>
        <h3 class="text-xl font-medium text-gray-600">暂无特色房间信息</h3>
        <p class="text-gray-500 mt-2">敬请期待我们的特色客房</p>
      </div>
      {% endfor %}
    </div>

    <div class="text-center mt-8">
      <a href="{% url 'rooms' %}" class="inline-flex items-center text-accent hover:text-primary transition-colors font-medium text-lg">
        查看所有房间
        <i class="fa fa-arrow-right ml-2"></i>
      </a>
    </div>
  </div>
</section>

<!-- 美食介绍 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-12">
      <div class="md:w-1/2 overflow-hidden rounded-lg shadow-custom transform hover:scale-[1.02] transition-transform">
        <img src="{% static 'images/food1.jpg' %}" alt="日式料理" class="w-full h-auto">
      </div>
      <div class="md:w-1/2">
        <h3 class="text-2xl font-serif font-semibold mb-4 text-primary flex items-center">
          <span class="w-8 h-[1px] bg-primary mr-3"></span>
          美食
        </h3>
        <p class="mb-6 leading-relaxed">
          {# 处理page_contents可能未定义的情况 #}
          {% if page_contents and page_contents.cuisine_text %}{{ page_contents.cuisine_text }}{% else %}我们的料理以当地时令食材为中心，由经验丰富的厨师精心烹制。每一道菜品都注重原汁原味，展现食材的天然美味。无论是怀石料理还是家常菜，都能让您品尝到地道的日式风味，体验舌尖上的日本。{% endif %}
        </p>
        <a href="{% url 'cuisine' %}" class="inline-flex items-center text-accent hover:text-primary transition-colors font-medium">
          美食介绍
          <i class="fa fa-arrow-right ml-2"></i>
        </a>
      </div>
    </div>
  </div>
</section>

<!-- 设施介绍 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12">
      <div class="md:w-1/2 overflow-hidden rounded-lg shadow-custom transform hover:scale-[1.02] transition-transform">
        <img src="../static/images/wq.jpg" alt="温泉设施" class="w-full h-auto">
      </div>
      <div class="md:w-1/2">
        <h3 class="text-2xl font-serif font-semibold mb-4 text-primary flex items-center">
          <span class="w-8 h-[1px] bg-primary mr-3"></span>
          设施
        </h3>
        <p class="mb-6 leading-relaxed">
          {# 处理page_contents可能未定义的情况 #}
          {% if page_contents and page_contents.facility_text %}{{ page_contents.facility_text }}{% else %}我们提供完善的设施服务，包括天然温泉、传统茶室、休闲庭院等。每一处设施都经过精心设计，旨在为您提供最舒适的住宿体验，让您在旅途中找到家的感觉。{% endif %}
        </p>
        <a href="{% url 'facility' %}" class="inline-flex items-center text-accent hover:text-primary transition-colors font-medium">
          设施介绍
          <i class="fa fa-arrow-right ml-2"></i>
        </a>
      </div>
    </div>
  </div>
</section>

<!-- 联系我们 -->
<section id="contact" class="py-16 bg-primary/10">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center justify-between gap-8">
      <div class="md:w-2/3">
        <h1 class="text-3xl font-serif font-bold mb-6 text-primary">联系我们</h1>
        <p class="text-lg leading-relaxed">
          如有任何疑问或需要预订，请随时联系我们。我们的工作人员将竭诚为您提供帮助，
          为您安排一次难忘的风之宿体验。
        </p>
      </div>
      <div class="md:w-1/3 flex flex-col items-center md:items-end">
        {# 修复预订按钮路由，添加user.前缀 #}
        <a href="{% url 'user:book_room' %}" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all shadow-md hover:shadow-lg text-lg w-full md:w-auto text-center">
          立即预订
        </a>
        <div class="top-number mt-4 text-lg">
          <p class="flex items-center"><i class="fa fa-phone-square mr-2 text-primary"></i> 0123-45-6789</p>
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
  // 轮播初始化
  document.addEventListener('DOMContentLoaded', function() {
    // 检查Swiper是否加载成功
    if (typeof Swiper !== 'undefined') {
      const swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        parallax: true,
        speed: 600,
        loop: true,
        autoplay: {
          delay: 3000,
        },
      });
    } else {
      console.error('Swiper库加载失败');
      // 显示错误信息给用户
      const sliderContainer = document.querySelector('.swiper-container');
      if (sliderContainer) {
        sliderContainer.innerHTML = `
          <div class="flex items-center justify-center h-full bg-gray-100">
            <p class="text-red-500">轮播图加载失败，请刷新页面重试</p>
          </div>
        `;
      }
    }
  });

  // 登录状态检查和处理
  document.addEventListener('DOMContentLoaded', function() {
    // 获取所有需要登录的链接
    const protectedLinks = document.querySelectorAll('a[href*="user.book_room"]');

    // 检查是否有登录状态提示（从base.html的导航栏获取）
    const isLoggedIn = document.querySelector('span:contains("欢迎，")') !== null;

    // 为预订链接添加点击事件，未登录时提示
    protectedLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        // 实际登录状态由后端控制跳转，这里仅做前端提示
        if (!isLoggedIn) {
          // 不阻止默认行为，因为后端会处理跳转登录
          // 只显示提示信息
          alert('请先登录以进行预订操作');
        }
      });
    });
  });
</script>
{% endblock %}
